import './less';

import React from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { Layout, Menu, Breadcrumb, Icon, Dropdown } from 'antd';
import FrameMenus from './FrameMenus';
import FrameContent from './FrameContent';
import * as UserActions from 'actions/UserAction';

const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;

const { Component } = React;

class Frame extends Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false,
      name: '',
    };
  }

  onCollapse = (collapsed) => {
    this.setState({ collapsed });
  };

  toLogout = () => {
    this.props.dispatch(UserActions.logout());
  };

  renderHeader = () => {
    const menu = (
      <Menu>
        <Menu.Item>
          <span onClick={ this.toLogout }>注销登陆</span>
        </Menu.Item>
      </Menu>
    );
    const {username} = this.props.user;
    return (
      <div>
        <Dropdown placement='bottomCenter' overlay={ menu }>
          <span style={ { float: 'right', paddingRight: '20px' } }>
            <Icon type='user' /> { username }
          </span>
        </Dropdown>
      </div>
    );
  };

  render() {
    const { name } = this.state;
    return (
      <Layout style={ { minHeight: '100vh' } }>
        <Sider
          collapsible
          collapsed={ this.state.collapsed }
          onCollapse={ this.onCollapse }
        >
          <div className='logo'>
            <h1><img src='/images/logo.png' /></h1>
          </div>
          <FrameMenus setName={ (name) => this.setState({ name }) } />
        </Sider>
        <Layout>
          <Header style={ { background: '#fff', padding: 0 } }>
            { this.renderHeader() }
          </Header>
          <Content style={ { margin: '0 16px' } }>
            <Breadcrumb style={ { margin: '16px 0' } }>
              <Breadcrumb.Item><Link to='/'>首页</Link></Breadcrumb.Item>
              <Breadcrumb.Item>{ name }</Breadcrumb.Item>
            </Breadcrumb>
            <div className='frame-content'>
              <FrameContent />
            </div>
          </Content>
          <Footer style={ { textAlign: 'center' } }>
            ©2018 Created by LuZhongKuan
          </Footer>
        </Layout>
      </Layout>
    );
  }
}

function mapStateToProps(state) {
  return {
    user: state.user.info,
  };
}

export default connect(mapStateToProps)(Frame);